<template>
	<view class="container box-b">
		<!-- container -->
		<view class="f36 g6 df ac jsa top-filter">
			<view
				class="flex-1 lh80 df ac jsc"
				:class="item.checked ? 'g4' : ''"
				v-for="(item, index) in filterArr"
				:key="index"
				@tap="openFilter(item)"
			>
				<view class="w80 text-over tc">{{ item.name }}</view>
				<text
					class="triangle mt10 ml10"
					:class="item.checked ? 'bottom-act' : 'bottom-def'"
					v-if="item.type !== 'complaint'"
				></text>
			</view>
		</view>
		<view class="list-content">
			<view
				class="box-bd mb20"
				v-for="(item, index) in dataList"
				:key="index"
			>
				<view class="df jsb ac h80">
					<view class="w60 df ac">
						<view class="title-icon"></view>
						<view class="ml20">{{ item.dailyDateStr }}</view>
					</view>
					<view class="w40 g9 tr"
						>来源：{{ item.shareUserName || '本人' }}</view
					>
				</view>
				<view class="pl20 pr20">
					<!-- <view class="df">
						<view class="nav-tag" :class="{ 'nav-tag-act': item.active }" v-for="(item, index) in labelList" :key="index">{{ item.tagName }}</view>
					</view> -->
					<view class="h80 lh80 bd-bottom-e text-over g9"
						>内容：{{
							item.content ? item.content : item.voiceText
						}}</view
					>
					<view class="df jse ac h100">
						<button
							class="delete-button small-size ml0 mr20 w25"
							v-if="!item.shareUserName"
							@tap="oeprate('del', item)"
						>
							删除
						</button>
						<button
							class="primary-button small-size ml0 mr0 w25"
							@tap="oeprate('details', item)"
						>
							详情
						</button>
					</view>
				</view>
			</view>
			<diy-empty v-if="dataList.length === 0"></diy-empty>
		</view>

		<view
			class="bottom-button-bd"
			@tap="oeprate('add', {})"
			style="z-index: 5"
		>
			<button class="primary-button w90">
				{{ type == 2 ? '写总结' : '写建议' }}
			</button>
		</view>
		<uni-popup ref="delAlertDialog" type="dialog">
			<uni-popup-dialog
				type="center"
				cancelText="取消"
				confirmText="确认"
				title="删除提示"
				:content="dialogContent"
				@confirm="dialogConfirm"
				@close="dialogClose"
			></uni-popup-dialog>
		</uni-popup>
		<!--筛选下拉框-->
		<view v-if="filterPopupShow" class="filter-popup">
			<view class="filter-bd">
				<view class="filter-content f36">
					<scroll-view :scroll-y="true" style="max-height: 340rpx">
						<view class="pt20" v-if="contentTypeVal === 'date'">
							<view class="df pl10 pr10 mt20">
								<view class="w45">
									<uni-datetime-picker
										type="date"
										v-model="filterStartDate"
										@change="chooseStartDate"
									>
										<view
											class="filter-item filter-item-def rel"
											:class="
												filterStartDate ? 'g3' : 'g9'
											"
										>
											{{
												filterStartDate
													? filterStartDate
													: '请选择开始时间'
											}}
											<view
												class="date-clear"
												@click.stop="
													chooseStartDate('')
												"
												><uni-icons
													type="close"
													size="40rpx"
													color="#666666"
												></uni-icons
											></view>
										</view>
									</uni-datetime-picker>
								</view>
								<view class="w10 tc lh80 g9">-</view>
								<view class="w45">
									<uni-datetime-picker
										type="date"
										v-model="filterEndDate"
										@change="chooseEndDate"
									>
										<view
											class="filter-item filter-item-def rel"
											:class="filterEndDate ? 'g3' : 'g9'"
										>
											{{
												filterEndDate
													? filterEndDate
													: '请选择结束时间'
											}}
											<view
												class="date-clear"
												@click.stop="chooseEndDate('')"
												><uni-icons
													type="close"
													size="40rpx"
													color="#666666"
												></uni-icons
											></view>
										</view>
									</uni-datetime-picker>
								</view>
							</view>
						</view>
						<view
							v-if="contentTypeVal === 'resource'"
							class="pd20 df fx-wp"
						>
							<view
								class="ml20 time-item"
								@tap="selectAll('resource')"
								:class="resourceCheckAll ? 'active-time' : ''"
								>全部</view
							>
							<view
								class="ml20 time-item"
								v-for="(item, index) in resourceList"
								:key="index"
								@tap="selectValue('resource', item)"
								:class="item.checked ? 'active-time' : ''"
							>
								{{ item.name }}
							</view>
						</view>
						<view
							v-if="contentTypeVal === 'label'"
							class="pd20 df fx-wp"
						>
							<view
								class="ml20 time-item"
								@tap="selectAll('label')"
								:class="labelCheckAll ? 'active-time' : ''"
								>全部</view
							>
							<view
								class="ml20 time-item"
								v-for="(item, index) in labelList"
								:key="index"
								@tap="selectValue('label', item)"
								:class="item.checked ? 'active-time' : ''"
							>
								{{ item.tagName }}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="filter-bottom">
					<button class="filter-button filter-reset w45" @tap="reset">
						重置
					</button>
					<button
						class="filter-button filter-submit w45"
						@tap="handleSearch"
					>
						确定
					</button>
				</view>
			</view>
			<view
				class="filter-popup-mask"
				@tap="closeFilter"
				catchtouchmove="true"
			></view>
		</view>
	</view>
</template>

<script>
const dayjs = require('@/common/dayjs.min.js')
export default {
	options: {
		styleIsolation: 'shared',
	},
	props: {
		type: {
			type: Number,
			// default: 0 //2总结，3建议
		},
	},
	data() {
		return {
			dayjs,
			resourceCheckAll: false,
			labelCheckAll: false,
			filterPopupShow: false,
			filterStartDate: '',
			filterEndDate: '',
			filterArr: [
				// {
				// 	type: 'date',
				// 	name: '日期',
				// 	checked: false
				// },
				// {
				// 	type: 'resource',
				// 	name: '来源',
				// 	checked: false
				// },
				// {
				// 	type: 'label',
				// 	name: '标签',
				// 	checked: false
				// }
			],
			labelList: [],
			resourceList: [],
			contentTypeVal: '',
			currentDate: '',
			searchParam: {
				startTime: '',
				endTime: '',
				pageIndex: 1,
				pageSize: 10,
			},
			chooseItem: {
				id: '',
			},
			dataList: [],
			hasMore: false,
			dialogContent: '确认是否删除总结？',
		}
	},
	created() {
		this.getList()
		this.getTags()
		this.getUserData()
		if (this.type == 2) {
			this.filterArr = [
				{
					type: 'date',
					name: '日期',
					checked: false,
				},
				{
					type: 'resource',
					name: '来源',
					checked: false,
				},
			]
		} else {
			this.filterArr = [
				{
					type: 'date',
					name: '日期',
					checked: false,
				},
				{
					type: 'resource',
					name: '来源',
					checked: false,
				},
				{
					type: 'label',
					name: '标签',
					checked: false,
				},
			]
		}
	},
	mounted() {
		uni.$on('onReachBottom', (val) => {
			if (this.hasMore && val !== 1) {
				this.searchParam.pageIndex = this.searchParam.pageIndex + 1
				this.getList()
			}
		})
	},
	methods: {
		isRefresh() {
			this.searchParam.pageIndex = 1
			this.dataList = []
			this.hasMore = false
			this.resourceCheckAll = false
			this.labelCheckAll = false
			this.filterPopupShow = false
			this.filterStartDate = ''
			this.filterEndDate = ''
			this.labelList.forEach((item) => {
				item.checked = false
			})
			this.resourceList.forEach((item) => {
				item.checked = false
			})
			this.getList()
		},
		handleSearch() {
			this.filterPopupShow = false
			this.hasMore = false
			this.getList()
		},
		async reset() {
			this.pageIndex = 1
			this.dataList = []
			this.hasMore = false
			this.resourceCheckAll = false
			this.labelCheckAll = false
			this.filterPopupShow = false
			this.filterStartDate = ''
			this.filterEndDate = ''
			this.labelList.forEach((item) => {
				item.checked = false
			})
			this.resourceList.forEach((item) => {
				item.checked = false
			})
			this.getList()
		},

		selectAll(type) {
			if (type === 'resource') {
				this.resourceCheckAll = !this.resourceCheckAll
				this.resourceList.forEach((item) => {
					item.checked = this.resourceCheckAll ? true : false
				})
			} else {
				this.labelCheckAll = !this.labelCheckAll
				this.labelList.forEach((item) => {
					item.checked = this.labelCheckAll ? true : false
				})
			}
		},
		//选择开始时间
		chooseStartDate(event) {
			if (event) {
				this.searchParam.startTime = event
			} else {
				this.filterStartDate = ''
				// this.initFilterDate()
			}
		},
		//选择结束时间
		chooseEndDate(event) {
			if (event) {
				// this.filterDateArr.forEach(item => {
				// 	item.checked = false
				// })
				this.searchParam.endTime = event
				// this.searchParam.pushTimeSort = 4
			} else {
				this.filterEndDate = ''
				// this.initFilterDate()
			}
		},
		getList() {
			let idsResource = this.resourceList
				.filter((item) => item.checked)
				.map((item) => {
					return item.id
				})

			let idsLabel = this.labelList
				.filter((item) => item.checked)
				.map((item) => {
					return item.id
				})
			let params = {
				...this.searchParam,
				shareUserIds: idsResource,
			}
			if (this.resourceCheckAll) {
				params.shareUserIds.push(uni.getStorageSync('userId'))
			}
			this.$request
				.request('carer-platform/journal/getUserDailyAdviseList', {
					method: 'post',
					data: params,
				})
				.then((res) => {
					if (res.success) {
						if (this.searchParam.pageIndex == 1) {
							this.hasMore = true
							this.dataList = res.data.data || []
							return
						} else {
							if (res.data.data && res.data.data.length > 0) {
								this.dataList = this.dataList.concat(
									res.data.data
								)
								this.hasMore = true
							} else {
								this.hasMore = false
							}
						}
					}
				})
		},
		//选择日期
		dateChange(e) {
			this.currentDate = e.detail.value
			this.getList()
		},
		//打开筛选框
		openFilter(row) {
			this.filterArr.forEach((item) => {
				item.checked = false
				if (row.type === item.type) {
					item.checked = true
				}
			})
			this.contentTypeVal = row.type
			this.filterPopupShow = true
			// if (row.type !== 'date') {
			// this.$refs.popup.open('top')
		},
		//关闭筛选框
		closeFilter() {
			this.filterPopupShow = false
		},
		selectValue(type, data) {
			if (type === 'label') {
				let index = this.labelList.findIndex(
					(item) => item.id == data.id
				)
				this.labelList[index].checked = !this.labelList[index].checked
				let findindex = this.labelList.findIndex(
					(item) => !item.checked
				)
				this.labelCheckAll = findindex == -1 ? true : false
			} else {
				let index = this.resourceList.findIndex(
					(item) => item.id == data.id
				)
				this.resourceList[index].checked =
					!this.resourceList[index].checked
				let findindex = this.resourceList.findIndex(
					(item) => !item.checked
				)
				this.resourceCheckAll = findindex == -1 ? true : false
			}
		},
		//操作
		oeprate(type, rowData) {
			if (type === 'add') {
				uni.navigateTo({
					url: `/subPackagesLog/pages/workLog/addSuggest?type=${this.type}`,
				})
			} else if (type === 'del') {
				this.chooseItem = rowData
				this.$refs.delAlertDialog.open()
			} else {
				this.chooseItem = rowData
				if (rowData.shareUserName) {
					uni.navigateTo({
						url: `/subPackagesLog/pages/workLog/dailyDetail?type=${this.type}&id=${rowData.id}`,
					})
				} else {
					uni.navigateTo({
						url: `/subPackagesLog/pages/workLog/addSuggest?type=${this.type}&id=${rowData.id}`,
					})
				}
			}
		},
		//删除确认
		dialogConfirm() {
			this.$request
				.request('carer-platform/journal/deleteUserDailyAdvise', {
					method: 'GET',
					data: {
						id: this.chooseItem.id,
					},
				})
				.then((res) => {
					if (res.success) {
						uni.showToast({
							title: '删除成功',
							icon: 'success',
						})
						this.searchParam.pageIndex = 1
						this.dataList = []
						this.hasMore = false
						this.getList()
					}
				})
		},
		//获取来源
		getUserData() {
			this.$request
				.request('user-web/user/queryPageByDefaultRole', {
					method: 'post',
					data: { roleIds: [-3, -8], pageIndex: 1, pageSize: 500 },
				})
				.then((res) => {
					let data = res.data.data
					if (data) {
						data.map((item) => {
							item.checked = false
						})
						data = data.filter(
							(item) => item.id !== uni.getStorageSync('userId')
						)
					}
					this.resourceList = data || []
				})
		},
		// 获取标签
		getTags() {
			this.$request
				.request('carer-platform/carer/businessTag/getBusinessTags', {
					method: 'post',
					data: {
						orgId: uni.getStorageSync('orgId'),
						userId: uni.getStorageSync('userId'),
						typeTags: [9],
					},
				})
				.then((res) => {
					let { data } = res
					if (data) {
						data.map((item) => {
							item.checked = false
						})
					}
					this.labelList = data || []
				})
		},
		//删除取消
		dialogClose() {},
	},
	watch: {
		type(val) {
			this.searchParam.pageIndex = 1
			this.dataList = []
			this.hasMore = false
			this.currentDate = ''
			this.resourceCheckAll = false
			this.labelCheckAll = false
			this.filterPopupShow = false
			if (val == 2) {
				this.filterArr = [
					{
						type: 'date',
						name: '日期',
						checked: false,
					},
					{
						type: 'resource',
						name: '来源',
						checked: false,
					},
				]
			} else {
				this.filterArr = [
					{
						type: 'date',
						name: '日期',
						checked: false,
					},
					{
						type: 'resource',
						name: '来源',
						checked: false,
					},
					{
						type: 'label',
						name: '标签',
						checked: false,
					},
				]
			}

			this.getTags()
			this.getUserData()
			this.getList()
		},
	},
	// onReachBottom(e) {
	// 	console.log(e + 'child')
	// }
}
</script>

<style scoped lang="scss">
.container {
	background-color: #ffffff;
	padding: 10rpx 20rpx;
	min-height: 100vh;
	font-size: 36rpx;
	padding-bottom: 160rpx;
	.box-bd {
		border-radius: 10rpx;
		padding: 0;
		.nav-tag {
			height: 50rpx;
			line-height: 50rpx;
			font-size: 32rpx;
			padding: 0 20rpx;
		}
		.nav-tag-act {
			// background-color: #f4fbfa;
		}
	}
	/deep/.uni-dialog-title-text {
		color: $danger-color !important;
		font-size: 36rpx !important;
	}
	/deep/.uni-dialog-content-text {
		font-size: 36rpx;
	}
	/deep/.uni-dialog-button-text {
		font-size: 40rpx;
	}
}
.time-item {
	border: 2rpx solid $primary-color;
	color: $primary-color;
	font-size: 36rpx;
	margin: 10rpx 15rpx 10rpx 0;
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
}
.active-time {
	color: #fff;
	background-color: $primary-color;
	border: 2rpx solid $primary-color;
}
.list-content {
	padding-top: 100rpx;
}
.top-filter {
	padding: 15rpx 20rpx;
	box-sizing: border-box;
	background: #fff;
	position: fixed;
	z-index: 10000;
	width: 100%;
	left: 0;
	top: 100rpx;
}
.content-item {
	margin-top: 200rpx;
	padding: 30rpx 20rpx 50rpx 20rpx;
	background: #fff;
}

.nav-tag {
	// flex: 1;
	margin-left: 10rpx;
	margin-right: 10rpx;
	height: 60rpx;
	padding: 10rpx 15rpx;
	line-height: 60rpx;
	font-size: 32rpx;
	border: 2rpx solid $primary-color;
	color: $primary-color;
}

.filter-popup {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9;
}
.filter-popup-mask {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: #000000;
	opacity: 0.2;
}

.filter-bd {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	background-color: #ffffff;
	max-height: 700rpx;
	z-index: 99;
}

.filter-content {
	padding-top: 200rpx;
	max-height: 340rpx;
}

.filter-bottom {
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.filter-button {
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
}

.filter-button::after {
	border: 0;
}

.filter-reset {
	border: 2rpx #cfcfcf solid;
}

.filter-submit {
	border: 2rpx $primary-color solid;
	color: #ffffff;
	background-color: $primary-color;
}
.filter-item {
	line-height: 70rpx;
	border-radius: 35rpx;
	background-color: #ffffff;
	text-align: center;
}
.filter-item-li {
	padding-left: 30rpx;
	padding-right: 30rpx;
	margin-left: 20rpx;
	margin-bottom: 20rpx;
}
.filter-item-def {
	border: 2rpx #cfcfcf solid;
}
.filter-item-act {
	border: 2rpx $primary-color solid;
	background-color: $primary-color;
	color: #ffffff;
}
.date-clear {
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	right: 0;
	top: 0;
	z-index: 9;
}
.order-nurse-bd {
	border-radius: 10rpx;
}
.order-nurse-bd /deep/.uni-section {
	background: none !important;
}
.order-nurse-bd /deep/ .uni-section .uni-section-header {
	padding: 10rpx 0 !important;
}
.order-nurse-bd /deep/.uni-section .uni-section-header__decoration.line {
	border-radius: 0 !important;
	width: 10rpx !important;
}
/deep/.uni-section .uni-section-header {
	padding: 0 !important;
}

/deep/.uni-section .uni-section-header__content .distraction {
	font-size: 40rpx !important;
}

/deep/.uni-section .uni-section-header__decoration.line {
	height: 40rpx !important;
}
</style>
